<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            width: 500px;
            background-color: coral;
            margin:0 auto;
        }
        #content{
            margin-left: 37px;
        }
        #ni{
            margin-left: 410px;
        }
        .btn{
            margin-left: 410px;
        }
        .Pcontent{
            width: 440px;
        }
    </style>
</head>
<body>
    <div class="main">
        <label for="nickname">昵称</label>
        <input type="text" id="nickname" class="nickname">
        <textarea  id="content" cols="50" rows="10" maxlength="500"></textarea>
        <div class="btnDv">
            <input type="checkbox" id="ni">匿名
            <input type="button" value="发表" class="btn">
        </div>
    </div>
    <script src="lib/jquery-3.3.1.min.js"></script>
    <script>
        $(".btn").click(function(){
            var nickname = $("#nickname").val();
            var content = $("#content").val();
            var ni = $("#ni").prop("checked");

            if(ni){
                nickname = "路人甲";
            }

            console.log(nickname);
            console.log(content);
            console.log(ni);

            if(nickname.length !== 0 && content.length !== 0){
                $("<p class='Pnickname'></p>").text(nickname + ' ' + new Date().toLocaleTimeString()).appendTo(".main");
                $("<p class='Pcontent'></p>").text(content).appendTo(".main");

                $("#nickname").val("");
                $("#content").val("");
            }
        });
    </script>
</body>
</html>